<template>
  <div class="body" id="body">
    <!-- <div class="container"> -->
    <div class="zuo"></div>
    <div class="you"></div>
    <div class="options">
      <div class="option active" style="background: url(/img/image/1.jpg)">
        <div class="shadow"></div>
        <div class="label">
          <div class="icon"><i class="fas fa-walking"></i></div>
          <div class="info">
            <div class="main">计算器</div>
            <div class="sub">这是一段描述</div>
          </div>
        </div>
      </div>
      <div class="option" style="background: url(/img/image/2.jpg)">
        <div class="shadow"></div>
        <div class="label">
          <div class="icon"><i class="fas fa-snowflake"></i></div>
          <div class="info">
            <div class="main">格式转化器</div>
            <div class="sub">这是一段描述</div>
          </div>
        </div>
      </div>
      <div class="option" style="background: url(/img/image/3.jpg)">
        <div class="shadow"></div>
        <div class="label">
          <div class="icon"><i class="fas fa-tree"></i></div>
          <div class="info">
            <div class="main">游戏</div>
            <div class="sub">这是一段描述</div>
          </div>
        </div>
      </div>
      <div class="option" style="background: url(/img/image/4.jpg)">
        <div class="shadow"></div>
        <div class="label">
          <div class="icon"><i class="fas fa-tint"></i></div>
          <div class="info">
            <div class="main">这是标题</div>
            <div class="sub">这是一段描述</div>
          </div>
        </div>
      </div>
      <div class="option" style="background: url(/img/image/5.jpg)">
        <div class="shadow"></div>
        <div class="label">
          <div class="icon"><i class="fas fa-sun"></i></div>
          <div class="info">
            <div class="main">这是标题</div>
            <div class="sub">这是一段描述</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- </div> -->
</template>

<script lang="ts">
export default {
  // name: "others",
};
</script>
<script lang="ts" setup>
const router = useRouter();
const tz = () => {
  router.push({
    path: "/sc",
  });
};
onMounted(() => {
  let op = document.getElementsByClassName("option");
  for (let i = 0; i < op.length; i++) {
    op[i].addEventListener("click", (e: any) => {
      for (let j = 0; j < op.length; j++) {
        op[j].classList.remove("active");
      }
      op[i].classList.add("active");
      if (i > 4) i %= 5;
      document.getElementById("body")!.style.backgroundImage =
        "url(/img/image/" + (i + 1) + ".jpg)";
    });
  }
});
</script>
<style lang="scss" scoped>
.body {
  list-style-type: none;
  position: relative;
  left: -20px;
  top: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 20px);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-family: sans-serif;
  background-image: url(../../img/image/1.jpg);
  position: relative;
  background-size: cover;
  box-sizing: border-box;
  transition: all ease 0.5s;
  z-index: 1;
  &:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: inherit;
    -webkit-filter: blur(2px) grayscale(30%);
    filter: blur(2px) grayscale(30%);
    z-index: 2;
  }
}
.zuo {
  position: fixed;
  left: 10%;
  width: 5vw;
  height: 20vh;
  z-index: 3;
  // background: url("/img/image/zuo.png") no-repeat;
  opacity: 0.8;
  transition: ease 0.5s;
  &:hover {
    opacity: 0.5;
  }
}

.yuo {
  position: fixed;
  right: 10%;
  width: 10vh;
  height: 10vh;
  z-index: 3;
  // background-image: url("/img/image/you.png");
  opacity: 0.8;
  transition: ease 0.5s;
  &:hover {
    opacity: 0.5;
  }
}

.options {
  display: flex;
  position: relative;
  z-index: 5;
  flex-direction: row;
  align-items: stretch;
  min-width: 600px;
  max-width: 50%;
  width: calc(100% - 100px);
  height: 400px;
  margin: 60px auto;
}

@media screen and (max-width: 718px) {
  .options {
    min-width: 520px;
  }

  .options .option:nth-child(5) {
    display: none;
  }
}

@media screen and (max-width: 638px) {
  .options {
    min-width: 440px;
  }

  .options .option:nth-child(4) {
    display: none;
  }
}

@media screen and (max-width: 558px) {
  .options {
    min-width: 360px;
  }

  .options .option:nth-child(3) {
    display: none;
  }
}

@media screen and (max-width: 478px) {
  .options {
    min-width: 280px;
  }

  .options .option:nth-child(2) {
    display: none;
  }
}

.options .option {
  position: relative;
  overflow: hidden;
  min-width: 60px;
  margin: 10px;
  background: var(--optionBackground, var(--defaultBackground, #e6e9ed));
  background-size: auto 120%;
  background-position: center;
  cursor: pointer;
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}

.options .option:nth-child(1) {
  --defaultBackground: #ed5565;
}

.options .option:nth-child(2) {
  --defaultBackground: #fc6e51;
}

.options .option:nth-child(3) {
  --defaultBackground: #ffce54;
}

.options .option:nth-child(4) {
  --defaultBackground: #2ecc71;
}

.options .option:nth-child(5) {
  --defaultBackground: #5d9cec;
}

.options .option:nth-child(6) {
  --defaultBackground: #ac92ec;
}

.options .option.active {
  flex-grow: 10000;
  -webkit-transform: scale(1);
  transform: scale(1);
  max-width: 600px;
  margin: 0px;
  border-radius: 40px;
  background-size: auto 100%;
  /*&:active {
     transform:scale(0.9);
  }*/
}

.options .option.active .shadow {
  box-shadow: inset 0 -120px 120px -120px black,
    inset 0 -120px 120px -100px black;
}

.options .option.active .label {
  bottom: 20px;
  left: 20px;
}

.options .option.active .label .info > div {
  left: 0px;
  opacity: 1;
}

.options .option:not(.active) {
  flex-grow: 1;
  border-radius: 30px;
}

.options .option:not(.active) .shadow {
  bottom: -40px;
  box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;
}

.options .option:not(.active) .label {
  bottom: 10px;
  left: 10px;
}

.options .option:not(.active) .label .info > div {
  left: 20px;
  opacity: 0;
}

.options .option .shadow {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 120px;
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}

.options .option .label {
  display: flex;
  position: absolute;
  right: 0px;
  height: 40px;
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}

.options .option .label .icon {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: white;
  color: var(--defaultBackground);
}

.options .option .label .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
  color: white;
  white-space: pre;
}

.options .option .label .info > div {
  position: relative;
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out;
}

.options .option .label .info .main {
  font-weight: bold;
  font-size: 1.2rem;
}

.options .option .label .info .sub {
  transition-delay: 0.1s;
}
</style>
